<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>品优购 - 优质！优质！</title>
  <link rel="stylesheet" href="assets/css/common.css">
  <link rel="stylesheet" href="assets/css/page-item.css">
  <link rel="stylesheet" href="assets/css/xzoom.css">
</head>

<body>
  <!--页面顶部-->
  <div id="nav-bottom">
    <!--顶部-->
    <div class="nav-top">
      <div class="top">
        <div class="py-container">
          <div class="shortcut">
            <ul class="fl">
              <li class="f-item">品优购欢迎您！</li>
              <li class="f-item">请
                <a href="login.html">登录</a>
                <span>
                  <a href="register.html">免费注册</a>
                </span>
              </li>
            </ul>
            <ul class="fr">
              <li class="f-item">
                <a href="member-order.html">我的订单</a>
              </li>
              <li class="f-item space"></li>
              <li class="f-item">
                <a href="member.html">我的品优购</a>
              </li>
              <li class="f-item space"></li>
              <li class="f-item">关注品优购</li>
              <li class="f-item space"></li>
              <li class="f-item">网站导航</li>
            </ul>
          </div>
        </div>
      </div>

      <!--头部-->
      <div class="header">
        <div class="py-container">
          <div class="yui3-g Logo">
            <div class="yui3-u Left logoArea">
              <a class="logo-bd" title="品优购" href="home.html"></a>
            </div>
            <div class="yui3-u Center searchArea">
              <div class="search">
                <form action="" class="sui-form form-inline">
                  <div class="input-append">
                    <input type="text" id="autocomplete" type="text" class="input-error input-xxlarge">
                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                  </div>
                </form>
              </div>
              <div class="hotwords">
                <ul>
                  <li class="f-item">品优购首发</li>
                  <li class="f-item">亿元优惠</li>
                  <li class="f-item">9.9元团购</li>
                  <li class="f-item">每满99减30</li>
                  <li class="f-item">亿元优惠</li>
                  <li class="f-item">9.9元团购</li>
                  <li class="f-item">办公用品</li>
                </ul>
              </div>
            </div>
            <div class="yui3-u Right shopArea">
              <div class="fr shopcar">
                <div class="show-shopcar">
                  <span class="car"></span>
                  <a class="sui-btn btn-default btn-xlarge" href="cart.html">
                    <span>我的购物车</span>
                    <i class="shopnum">0</i>
                  </a>
                  <div class="clearfix shopcarlist"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="yui3-g NavList">
            <div class="all-sorts-list">
              <div class="yui3-u Left all-sort">
                <h4>全部商品分类</h4>
              </div>
              <div class="sort">
                <div class="all-sort-list2">
                  <div class="item">
                    <h3><a href="list.html">图书、音像、数字商品</a></h3>
                    <div class="item-list clearfix">
                      <div class="subitem">
                        <dl>
                          <dt><a href="list.html">电子书</a></dt>
                          <dd>
                            <em><a href="list.html">免费</a></em>
                            <em><a href="list.html">小说</a></em>
                            <em><a href="list.html">励志与成功</a></em>
                            <em><a href="list.html">婚恋/两性</a></em>
                            <em><a href="list.html">文学</a></em>
                            <em><a href="list.html">经管</a></em>
                            <em><a href="list.html">畅读VIP</a></em>
                          </dd>
                        </dl>
                        <dl>
                          <dt><a href="list.html">电子书</a></dt>
                          <dd>
                            <em><a href="list.html">免费</a></em>
                            <em><a href="list.html">小说</a></em>
                            <em><a href="list.html">励志与成功</a></em>
                            <em><a href="list.html">婚恋/两性</a></em>
                            <em><a href="list.html">文学</a></em>
                            <em><a href="list.html">经管</a></em>
                            <em><a href="list.html">畅读VIP</a></em>
                          </dd>
                        </dl>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">家用电器</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">手机、数码</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">电脑、办公</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">家居、家具、家装、厨具</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">服饰内衣</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">个护化妆</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">运动健康</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">汽车用品</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">彩票、旅行</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">理财、众筹</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">母婴、玩具</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">箱包</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">运动户外</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                  <div class="item">
                    <h3><a href="list.html">箱包</a></h3>
                    <div class="item-list clearfix"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="yui3-u Center navArea">
              <ul class="nav">
                <li class="f-item">服装城</li>
                <li class="f-item">美妆馆</li>
                <li class="f-item">品优超市</li>
                <li class="f-item">全球购</li>
                <li class="f-item">闪购</li>
                <li class="f-item">团购</li>
                <li class="f-item">有趣</li>
                <li class="f-item">秒杀</li>
              </ul>
            </div>
            <div class="yui3-u Right"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="main">
    <div class="py-container">
      <div class="crumb-wrap">
        <ul class="sui-breadcrumb">
          <li><a href="#">手机、数码、通讯</a></li>
          <li><a href="#">手机</a></li>
          <li><a href="#">Apple苹果</a></li>
          <li class="active">iphone 6S系类</li>
        </ul>
      </div>
      <!--product-info-->
      <div class="product-info">
        <div class="fl preview-wrap">
          <!--放大镜效果-->
          <div class="zoom">
            <!--默认第一个预览-->
            <div id="preview" class="spec-preview">
              <img class="xzoom" xoriginal="uploads/b1.png" src="uploads/s1.png" width="100%">
            </div>
            <!--下方的缩略图-->
            <div class="spec-scroll">
              <a href="uploads/b1.png"><img class="xzoom-gallery" src="uploads/s1.png" width="60"></a>
              <a href="uploads/b2.png"><img class="xzoom-gallery" src="uploads/s2.png" width="60"></a>
              <a href="uploads/b3.png"><img class="xzoom-gallery" src="uploads/s3.png" width="60"></a>
              <a href="uploads/b1.png"><img class="xzoom-gallery" src="uploads/s1.png" width="60"></a>
              <a href="uploads/b2.png"><img class="xzoom-gallery" src="uploads/s2.png" width="60"></a>
            </div>
          </div>
        </div>
        <div class="fr itemInfo-wrap">
          <div class="sku-name">
            <h4>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h4>
          </div>
          <div class="summary">
            <div class="summary-wrap">
              <div class="fl title"><i>价　　格</i></div>
              <div class="fl price"><i>¥</i><em>5299.00</em></div>
              <div class="fr remark"><i>累计评价</i><em>612188</em></div>
            </div>
          </div>
          <div class="support">
            <div class="summary-wrap">
              <div class="fl title"><i>支　　持</i></div>
              <div class="fl fix-width"><em class="t-gray">以旧换新，闲置手机回收 4G套餐超值抢 礼品购</em></div>
            </div>
          </div>
          <div class="clearfix choose">
            <div id="specification" class="summary-wrap clearfix">
              <dl>
                <dt class="fl title"><i>选择颜色</i></dt>
                <dd>
                  <a href="#" class="selected">金色</a>
                  <a href="#">银色</a>
                  <a href="#">黑色</a>
                </dd>
              </dl>
              <dl>
                <dt class="fl title"><i>内存容量</i></dt>
                <dd>
                  <a href="#" class="selected">16G</a>
                  <a href="#">64G</a>
                  <a href="#">128G</a>
                </dd>
              </dl>
            </div>

            <div class="summary-wrap">
              <div class="controls">
                <input autocomplete="off" type="text" value="1" minnum="1" class="itxt">
                <a href="#" class="increment plus">+</a>
                <a href="#" class="increment mins">-</a>
              </div>
              <a href="cart-add.html" class="sui-btn  btn-danger addshopcar">加入购物车</a>
            </div>
          </div>
        </div>
      </div>
      <!--product-detail-->
      <div class="clearfix product-detail">
        <div class="fl aside">
          <ul class="sui-nav nav-tabs tab-wraped">
            <li class="active">
              <a href="#index" data-toggle="tab"><span>相关分类</span></a>
            </li>
            <li>
              <a href="#profile" data-toggle="tab"><span>推荐品牌</span></a>
            </li>
          </ul>
          <div class="tab-content tab-wraped">
            <div id="index" class="tab-pane active">
              <ul class="part-list unstyled">
                <li>手机</li>
                <li>手机壳</li>
                <li>内存卡</li>
                <li>Iphone配件</li>
                <li>贴膜</li>
                <li>手机耳机</li>
                <li>移动电源</li>
                <li>平板电脑</li>
              </ul>
              <ul class="goods-list unstyled">
                <li>
                  <div class="p-img"><img src="uploads/mobile.png"></div>
                  <div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div>
                  <div class="price"><strong>￥6888</strong></div>
                  <div class="operate"><a href="#" class="sui-btn btn-bordered">加入购物车</a></div>
                </li>
                <li>
                  <div class="p-img"><img src="uploads/mobile.png"></div>
                  <div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div>
                  <div class="price"><strong>￥6888</strong></div>
                  <div class="operate"><a href="#" class="sui-btn btn-bordered">加入购物车</a></div>
                </li>
                <li>
                  <div class="p-img"><img src="uploads/mobile.png"></div>
                  <div class="attr"><em>Apple苹果iPhone 6s (A1699)</em></div>
                  <div class="price"><strong>￥6888</strong></div>
                  <div class="operate"><a href="#" class="sui-btn btn-bordered">加入购物车</a></div>
                </li>
              </ul>
            </div>
            <div id="profile" class="tab-pane">
              <p>推荐品牌</p>
            </div>
          </div>
        </div>
        <div class="fr detail">
          <ul class="sui-nav nav-tabs tab-wraped">
            <li class="active"><a href="#one" data-toggle="tab"><span>商品介绍</span></a></li>
            <li><a href="#two" data-toggle="tab"><span>规格与包装</span></a></li>
            <li><a href="#three" data-toggle="tab"><span>售后保障</span></a></li>
            <li><a href="#four" data-toggle="tab"><span>商品评价</span></a></li>
          </ul>
          <div class="tab-content tab-wraped">
            <div id="one" class="tab-pane active">
              <ul class="goods-intro unstyled">
                <li>分辨率：1920*1080(FHD)</li>
                <li>后置摄像头：1200万像素</li>
                <li>前置摄像头：500万像素</li>
                <li>核 数：其他</li>
                <li>频 率：以官网信息为准</li>
                <li>品牌： Apple</li>
                <li>商品名称：APPLEiPhone 6s Plus</li>
                <li>商品编号：1861098</li>
                <li>商品毛重：0.51kg</li>
                <li>商品产地：中国大陆</li>
                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                <li>系统：苹果（IOS）</li>
                <li>像素：1000-1600万</li>
                <li>机身内存：64GB</li>
              </ul>
              <div class="intro-detail">
                <img src="uploads/intro01.png">
                <img src="uploads/intro02.png">
                <img src="uploads/intro03.png">
              </div>
            </div>
            <div id="two" class="tab-pane">
              <p>规格与包装</p>
            </div>
            <div id="three" class="tab-pane">
              <p>售后保障</p>
            </div>
            <div id="four" class="tab-pane">
              <div class="comment">
                <div class="com-tit">商品评价</div>
                <div class="com-percent">好评率<span class="percent">96%</span></div>
                <div class="com-tab-type">
                  <ul class="type">
                    <li class="current"><a href="#">全部评价(123456)</a></li>
                    <li><a href="#">晒图(500)</a></li>
                    <li><a href="#">追评(500)</a></li>
                    <li><a href="#">好评(500)</a></li>
                    <li><a href="#">中评(500)</a></li>
                    <li><a href="#">差评(500)</a></li>
                  </ul>
                  <div class="content">
                    <div class="com-item">
                      <div class="user-column">
                        <div class="username">
                          <img src="uploads/photo.jpg">用户****1</div>
                        <div class="usernum">品享值258698</div>
                      </div>
                      <div class="user-info">
                        <div class="stars star4"></div>
                        <p>手机还不错，可以的可以的</p>
                        <div class="guige">
                          <ul class="mini">
                            <li>玫瑰金</li>
                            <li>标配版</li>
                            <li>2017-11-02 13:23</li>
                          </ul>
                          <div class="operate">
                            <span id="collect"><i class="sui-icon icon-tb-like"></i> 325</span>
                            <span id="comment"><i class="sui-icon icon-tb-wang"></i> 256</span>
                          </div>
                          <div class="clearfix"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--页面底部-->
  <div class="clearfix footer">
    <div class="py-container">
      <div class="footlink">
        <div class="Mod-service">
          <ul class="Mod-Service-list">
            <li class="grid-service-item intro  intro1">
              <i class="serivce-item fl"></i>
              <div class="service-text">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li class="grid-service-item  intro intro2">
              <i class="serivce-item fl"></i>
              <div class="service-text">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li class="grid-service-item intro  intro3">
              <i class="serivce-item fl"></i>
              <div class="service-text">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li class="grid-service-item  intro intro4">
              <i class="serivce-item fl"></i>
              <div class="service-text">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
            <li class="grid-service-item intro intro5">
              <i class="serivce-item fl"></i>
              <div class="service-text">
                <h4>正品保障</h4>
                <p>正品保障，提供发票</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="clearfix Mod-list">
          <div class="yui3-g">
            <div class="yui3-u-1-6">
              <h4>购物指南</h4>
              <ul class="unstyled">
                <li>购物流程</li>
                <li>会员介绍</li>
                <li>生活旅行/团购</li>
                <li>常见问题</li>
                <li>购物指南</li>
              </ul>
            </div>
            <div class="yui3-u-1-6">
              <h4>配送方式</h4>
              <ul class="unstyled">
                <li>上门自提</li>
                <li>211限时达</li>
                <li>配送服务查询</li>
                <li>配送费收取标准</li>
                <li>海外配送</li>
              </ul>
            </div>
            <div class="yui3-u-1-6">
              <h4>支付方式</h4>
              <ul class="unstyled">
                <li>货到付款</li>
                <li>在线支付</li>
                <li>分期付款</li>
                <li>邮局汇款</li>
                <li>公司转账</li>
              </ul>
            </div>
            <div class="yui3-u-1-6">
              <h4>售后服务</h4>
              <ul class="unstyled">
                <li>售后政策</li>
                <li>价格保护</li>
                <li>退款说明</li>
                <li>返修/退换货</li>
                <li>取消订单</li>
              </ul>
            </div>
            <div class="yui3-u-1-6">
              <h4>特色服务</h4>
              <ul class="unstyled">
                <li>夺宝岛</li>
                <li>DIY装机</li>
                <li>延保服务</li>
                <li>品优购E卡</li>
                <li>品优购通信</li>
              </ul>
            </div>
            <div class="yui3-u-1-6">
              <h4>帮助中心</h4>
              <img src="assets/img/wx_cz.jpg">
            </div>
          </div>
        </div>
        <div class="Mod-copyright">
          <ul class="helpLink">
            <li>关于我们<span class="space"></span></li>
            <li>联系我们<span class="space"></span></li>
            <li>关于我们<span class="space"></span></li>
            <li>商家入驻<span class="space"></span></li>
            <li>营销中心<span class="space"></span></li>
            <li>友情链接<span class="space"></span></li>
            <li>关于我们<span class="space"></span></li>
            <li>营销中心<span class="space"></span></li>
            <li>友情链接<span class="space"></span></li>
            <li>关于我们</li>
          </ul>
          <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
          <p>京ICP备08001421号京公网安备110108007702</p>
        </div>
      </div>
    </div>
  </div>
  <!--页面底部END-->

  <!--侧栏面板开始-->
  <div class="J-global-toolbar">
    <div class="toolbar-wrap">
      <div class="toolbar">
        <div class="toolbar-panels">
          <!-- 购物车 -->
          <div class="toolbar-panel tbar-panel-cart" style="visibility: hidden;">
            <h3 class="tbar-panel-header">
              <a class="title" href="cart.html"><i></i><em class="title">购物车</em></a>
              <span class="close-panel"></span>
            </h3>
            <div class="tbar-panel-main">
              <div class="tbar-panel-content">
                <div class="tbar-tipbox hide">
                  <div class="tip-inner">
                    <span class="tip-text">还没有登录，登录后商品将被保存</span>
                    <a href="login.html" class="tip-btn">登录</a>
                  </div>
                </div>
                <!-- 列表 -->
                <div class="tbar-cart-list"></div>
              </div>
            </div>
            <!-- 小计 -->
            <div class="tbar-panel-footer">
              <div class="tbar-checkout">
                <div class="jtc-number"><strong>0</strong>件商品</div>
                <div class="jtc-sum"> 共计：<strong>¥0</strong></div>
                <a class="jtc-btn" href="cart.html">去购物车结算</a>
              </div>
            </div>
          </div>
          <!-- 我的关注 -->
          <div class="toolbar-panel tbar-panel-follow" style="visibility: hidden;">
            <h3 class="tbar-panel-header">
              <a class="title" href="#"><i></i><em class="title">我的关注</em></a>
              <span class="close-panel"></span>
            </h3>
            <div class="tbar-panel-main">
              <div class="tbar-panel-content"></div>
            </div>
          </div>
          <!-- 我的足迹 -->
          <div class="toolbar-panel tbar-panel-history" style="visibility: hidden;">
            <h3 class="tbar-panel-header">
              <a class="title" href="#"><i></i><em class="title">我的足迹</em></a>
              <span class="close-panel"></span>
            </h3>
            <div class="tbar-panel-main">
              <div class="tbar-panel-content">
                <div class="jt-history-wrap">
                  <ul>
                    <!-- <li class="jth-item">
                      <a class="img-wrap" href="item.html"><img src="#" height="100" width="100"></a>
                      <a class="add-cart-button" href="cart-add.html">加入购物车</a>
                      <span class="price">￥498.00</span>
                    </li>
                    <li class="jth-item">
                      <a class="img-wrap" href="item.html"><img src="#" height="100" width="100"></a>
                      <a class="add-cart-button" href="cart-add.html">加入购物车</a>
                      <span class="price">￥498.00</span>
                    </li> -->
                  </ul>
                  <a class="history-bottom-more" href="#">查看更多足迹商品 &gt;&gt;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 侧栏按钮 -->
        <div class="toolbar-tabs">
          <div class="toolbar-tab tbar-tab-cart" data-title="购物车" data-target="cart"><i class="tab-ico"></i><em class="tab-text"></em><span class="tab-sub">0</span></div>
          <div class="toolbar-tab tbar-tab-follow" data-title="我的关注" data-target="follow"><i class="tab-ico"></i><em class="tab-text"></em></div>
          <div class="toolbar-tab tbar-tab-history" data-title="我的足迹" data-target="history"><i class="tab-ico"></i><em class="tab-text"></em></div>
        </div>
        <div class="toolbar-footer">
          <div class="toolbar-tab tbar-tab-top">
            <a href="#"><i class="tab-ico"></i><em class="footer-tab-text">顶部</em></a>
          </div>
          <div class="toolbar-tab tbar-tab-feedback">
            <a href="#"><i class="tab-ico"></i><em class="footer-tab-text">反馈</em></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!--购物车单元格 模板-->
  <script type="text/template" id="tbar-cart-item-template">
    <div class="tbar-cart-item">
      <div class="jtc-item-promo">
        <em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
        <div class="promo-text">已购满600元，您可领赠品</div>
      </div>
      <div class="jtc-item-goods">
        <span class="p-img"><a href="#"><img src="{2}" alt="{1}" height="50" width="50"></a></span>
        <div class="p-name">
          <a href="#">{1}</a>
        </div>
        <div class="p-price"><strong>¥{3}</strong>×{4} </div>
        <a class="p-del" href="#">删除</a>
      </div>
    </div>
  </script>
  <script src="assets/js/jquery.js"></script>
  <script src="assets/js/sui.tab.js"></script>
  <script src="assets/js/sui.transition.js"></script>
  <script src="assets/js/xzoom.min.js"></script>
  <script src="assets/js/common.js"></script>
  <script>
    $(function ($) {
      $('.xzoom, .xzoom-gallery').xzoom({ tint: '#888', Xoffset: 15 })
    })
  </script>
</body>

</html>
